<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 自定义指令
    v-text v-html v-once v-on v-if v-else-if v-else v-show v-for v-model v-cloak v-bind   
    v-开头的都是指令

    -->
    <div class="box">
        <h1>{{msg}}</h1>
        <!-- 将其变为大写 -->
        <h1>{{msg.toUpperCase()}}</h1>
        <!-- 想用指令的形式将其变为大写 -->
        <h1 v-tuc="msg"></h1>
        <!-- <h2 v-tlc="info"></h2> -->
        <h2 v-lc="info"></h2>
        <input type="text" v-focus>
    </div>
    <div class="box1">
        <!-- <h1 v-tuc="msg"></h1> -->
        <!-- <h2 v-tlc="info"></h2> -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        // 全局指令
       /*  Vue.directive('tlc',{
            bind(el,binding){
                el.textContent = binding.value.toLowerCase();
            }
        }) */
        let vm = new Vue({
            el:'.box',
            data:{
                msg:'fuairushan',
                info:'MUAIWEIDA'
            },
            // 自定义指令  局部指令
            directives:{
                    tuc:{
                        bind(el,binding){
                            // console.log(el);//h1
                            // el指绑定指令的元素，可以用来直接操作该DOM
                            // console.log(binding);
                            /* 是一个对象
                            def: {bind: ƒ}
                            expression: "msg"
                            modifiers: {}
                            name: "tuc"
                            rawName: "v-tuc"
                            value: "fuairushan"
                            */
                           el.textContent = binding.value.toUpperCase();
                           console.log(el.parentNode);
                        }
                    },
                    lc:{
                        inserted(el,binding){
                            // console.log(el);
                            // console.log(binding);
                            el.textContent = binding.value.toLowerCase();
                            console.log(el.parentNode);
                        }
                    },
                    focus:{
                        /* bind(el){
                            console.log(el);
                        } */
                        inserted(el){
                            console.log(el);
                            el.focus();
                        }
                        /* 
                        bind inserted DOM插入之后都会调用  bind是inserted
                        bind调用时父节点为null,inserted调用时父节点存在bind在DOM树绘制之前调用，inserted在DOM树绘制之后调用
                        
                        focus获取焦点使用inserted绑定
                        */
                    }
            }
        })

        let vm1 = new Vue({
            el:'.box1',
            data:{
                msg:'fuairushan',
                info:'MUAIRUHAI'
            }
        })
    </script>

</body>
</html>